<template>
    <div class="m_right">
        <p></p>
        <div class="mem_tit">商品列表</div>
        <form class="horizontal-form">
            <div class="form-item">
                <label>商品名称：</label>
                <input type="text" name="name" v-model="name" />
            </div>
            <div class="form-item">
                <label>年份：</label>
                <input type="text" name="createTime" v-model="createTime" @blur="checkCreateTime()" />
                <span style="color:red">{{ timeErr }}</span>
            </div>
            <div class="form-item">
                <input type="button" value="查询" @click="getProductList(1, 8)" />
                <input type="button" value="重置" @click="resetForm()" />
            </div>
        </form>
        <table>
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>商品图片</th>
                    <th>商品库存</th>
                    <th>商品价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="product in productList" :key="product.id">
                    <td v-html="product.name"></td>
                    <td><img :src="'http://192.168.144.183:9090/easybuyImages/' + product.fileName" width="50px"></td>
                    <td>{{ product.stock + product.orderStock }}</td>
                    <td>{{ product.price }}</td>
                    <td>
                        <a href="#" @click="updateProduct(product.id)">修改</a>&nbsp;&nbsp;
                        <a href="#" @click="delProduct(product.id)">删除</a>
                    </td>
                </tr>
                <tr v-if="pageInfo.total === 0">
                    <td colspan="5" style="color:#ff4e00;">暂无数据哦!亲</td>
                </tr>
            </tbody>
        </table>
        <!-- <p class="pagination" v-if="pageInfo.total !== 0">
            <span>当前{{ pageInfo.pageNum }}/{{ pageInfo.pages }}页</span>&nbsp;&nbsp;
            <a href="#" @click="nextPage('home')">首页</a>&nbsp;&nbsp;
            <a href="#" @click="nextPage('pre')">上一页</a>&nbsp;&nbsp;
            <a href="#" @click="nextPage('next')">下一页</a>&nbsp;&nbsp;
            <a href="#" @click="nextPage('end')">尾页</a>&nbsp;&nbsp;
            <span>共{{ pageInfo.total }}条数据</span>
        </p> -->

        <p class="pagination" v-if="pageInfo.total !== 0">
            <span class="left-buttons">
                <button @click="nextPage('home')" :disabled="pageInfo.pageNum === 1">首页</button>
                <button @click="nextPage('pre')" :disabled="pageInfo.pageNum === 1">上一页</button>

                <span v-for="page in visiblePages" :key="page">
                    <button @click="getProductList(page, 8)" :class="{ active: page === pageInfo.pageNum }">
                        {{ page }}
                    </button>
                </span>

                <button @click="nextPage('next')" :disabled="pageInfo.pageNum === pageInfo.pages">下一页</button>
                <button @click="nextPage('end')" :disabled="pageInfo.pageNum === pageInfo.pages">尾页</button>
            </span>

            <span class="right-info">共 {{ pageInfo.total }} 条数据，共 {{ pageInfo.pages }} 页</span>
        </p>
    </div>
</template>

<script>

export default {
    name: 'MemberProductListRight',
    data() {
        return {
            productList: [],
            name: '',
            createTime: '',
            pageInfo: {},
            timeErr: ''
        }
    },
    computed: {
        visiblePages() {
            const total = this.pageInfo.pages;
            const current = this.pageInfo.pageNum;
            const range = 2; // 当前页左右各显示2页
            let start = Math.max(1, current - range);
            let end = Math.min(total, current + range);
            const pages = [];
            for (let i = start; i <= end; i++) {
                pages.push(i);
            }
            return pages;
        }
    },
    methods: {
        //获取产品列表数据
        getProductList(pageNum, pageSize) {
            if (!this.checkCreateTime()) {
                return
            }
            this.$axios({
                url: '/selectProductByPage',
                method: 'post',
                data: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    name: this.name,
                    createTime: this.createTime
                },
                hearers: {
                    'Content-Type': 'application/json'
                }
            }).then(rs => {
                console.log("商品列表数据" + rs)
                this.pageInfo = rs.data.pageInfo
                this.productList = rs.data.pageInfo.list
            })
        }
        // 跳页
        , nextPage(rep) {
            let pageNum = 1;
            switch (rep) {
                case "next":
                    pageNum = this.pageInfo.nextPage === 0 ? this.pageInfo.pages : this.pageInfo.nextPage;
                    break;
                case "pre":
                    pageNum = this.pageInfo.prePage === 0 ? 1 : this.pageInfo.prePage;
                    break;
                case "end":
                    pageNum = this.pageInfo.pages;
                    break;
            }
            this.getProductList(pageNum, 8)
        }
        // 重置列表查询
        , resetForm() {
            this.name = ''
            this.createTime = ''
            this.getProductList(1, 8)
        }
        , updateProduct(id) {
            this.$emit('changeView', { component: 'MemberProductUpdateRight', productId: id });
        }
        , delProduct(id) {
            const flag = confirm("确定删除" + id + "商品吗？")
            if (!flag) {
                return
            }
            this.$axios({
                url: '/delProduct',
                method: 'get',
                params: {
                    id: id
                }
            }).then(rs => {
                console.log("删除商品" + rs)
                if (rs.data.code === 5200) {
                    this.getProductList(1, 8)
                }
            })
        },
        checkCreateTime() {
            let patten = /^\d{4}$/
            if (this.createTime == '') {
                return true
            }
            if (!patten.test(this.createTime)) {
                this.timeErr = '请输入正确的年份（例如2025）'
                return false
            }
            this.timeErr = ''
            return true
        }
    },
    mounted() {
        this.getProductList(1, 8)
    }
}
</script>

<style scoped>
/* 水平表单 */
.horizontal-form {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    gap: 12px;
    /* 列间距 */
    flex-wrap: wrap;
    /* 小屏自动换行 */
}

.form-item {
    display: flex;
    align-items: center;
    gap: 4px;
    /* label 与 input 间距 */
}

/* 按钮组靠右 */
.buttons {
    margin-left: auto;
}

table {
    width: 90%;
    border-collapse: collapse;
    margin-top: 20px;
    text-align: center;
    border: 1px solid #ddd;
}

th,
td {
    border: 1px solid #ddd;
    /* 内部细线 */
    padding: 6px 10px;
    /* 文字与线之间的空隙 */
}

/* 操作 */

tbody tr:hover {
    background: #f5f5f5;
}

/* 分页居中 */
.pagination {
    width: 90%;
    display: flex;
    justify-content: space-between;
    /* 按钮靠左，span靠右 */
    align-items: center;
    margin-top: 20px;
}

.pagination button {
    margin: 0 4px;
    padding: 4px 8px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    border-radius: 3px;
}

.pagination button:hover:not(.active):not(:disabled) {
    background: #f0f0f0;
}

.pagination button.active {
    background: #ff4e00;
    color: white;
    border-color: #ff4e00;
}

.pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.left-buttons {
    margin-left: 5%;
    gap: 4px;
}

.right-info {
    margin-left: auto;
    white-space: nowrap;
}
</style>